<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body,
    html {
      width: 100%;
      height: 100%;
      margin: 0;
      font-family: "微软雅黑";
    }

    #allmap {
      height: 500px;
      width: 100%;
    }

    #r-result {
      width: 100%;
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6Ej99wrRa8eXjAYpP2Auh3eg"></script>
  <title>添加/删除覆盖物</title>
</head>

<body>
  <div id="allmap"></div>
  <div id="r-result">
    <input type="button" onclick="add_overlay();" value="添加覆盖物" />
    <input type="button" onclick="remove_overlay();" value="删除覆盖物" />
  </div>
</body>

</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");
  var point = new BMap.Point(116.404, 39.915);
  map.centerAndZoom(point, 15);

  var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点
  var polyline = new BMap.Polyline([
    new BMap.Point(116.399, 39.910),
    new BMap.Point(116.405, 39.920),
    new BMap.Point(116.425, 39.900)
  ], {
    strokeColor: "blue",
    strokeWeight: 2,
    strokeOpacity: 0.5
  }); //创建折线

  var circle = new BMap.Circle(point, 500, {
    strokeColor: "blue",
    strokeWeight: 2,
    strokeOpacity: 0.5
  }); //创建圆

  var polygon = new BMap.Polygon([
    new BMap.Point(116.387112, 39.920977),
    new BMap.Point(116.385243, 39.913063),
    new BMap.Point(116.394226, 39.917988),
    new BMap.Point(116.401772, 39.921364),
    new BMap.Point(116.41248, 39.927893)
  ], {
    strokeColor: "blue",
    strokeWeight: 2,
    strokeOpacity: 0.5
  }); //创建多边形

  var pStart = new BMap.Point(116.392214, 39.918985);
  var pEnd = new BMap.Point(116.41478, 39.911901);
  var rectangle = new BMap.Polygon([
    new BMap.Point(pStart.lng, pStart.lat),
    new BMap.Point(pEnd.lng, pStart.lat),
    new BMap.Point(pEnd.lng, pEnd.lat),
    new BMap.Point(pStart.lng, pEnd.lat)
  ], {
    strokeColor: "blue",
    strokeWeight: 2,
    strokeOpacity: 0.5
  }); //创建矩形

  //添加覆盖物
  function add_overlay() {
    map.addOverlay(marker); //增加点
    map.addOverlay(polyline); //增加折线
    map.addOverlay(circle); //增加圆
    map.addOverlay(polygon); //增加多边形
    map.addOverlay(rectangle); //增加矩形
  }
  //清除覆盖物
  function remove_overlay() {
    map.clearOverlays();
  }
</script>
